<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title> 分享
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.mui-icon-extra {
				font-size: 24px;
				display: block;
				margin-top: 5px;
				line-height: 18px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-table-view all-top" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择地址</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--表单-->
		<div class="mui-table-view mui-table-view-chevron" style="margin-top: 3.5rem;">
			<div class="mui-content-padded" style="margin: 5px;">
				<form class="mui-input-group">
					<div class="mui-input-row" style="font-size: 14px;">
						<label>地址:</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;" disabled="disabled" id="address">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>省:</label>
						<button id='province' type='button' style="border: none; margin-top: 1%;" value="" >--请选择--</button>

					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>市 :</label>
						<button id='city' type='button' style="border: none; margin-top: 1%;" value="">--请选择--</button>

					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>区/县 :</label>
						<button id='region' type='button' style="border: none; margin-top: 1%;" value="">--请选择--</button>

					</div>
					<div class="mui-input-row" style="font-size: 14px;" >
						<label>门店:</label>
						<button id='shop' type='button' style="border: none; margin-top: 1%;" value="">--请选择--</button>
					</div>
				</form>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<span class="mui-tab-item" onclick="javascript:window.location.href='index.html'">
		      取消
		    </span>
			<span class="mui-tab-item mui-active" onclick="javascript:window.location.href='mall.html'">
		        <a href="mall.html"></a>确定
		    </span>

		</nav>
		
	
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '财富中心'
					}, {
						value: 'aaa',
						text: '华府天地'
					}, {
						value: 'lj',
						text: '金融中心'
					}]);
                    var address ='';
					var province = doc.getElementById('province');
					province.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							address = "" + items[0].text + "";
							province.innerText =address;
							province.value=address;
							getAddress();
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
						
					}, false);

					var city = doc.getElementById('city');
					city.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
						
							address ="" + items[0].text + "";
							city.innerText =address;
							city.value=address;
							getAddress();
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
						
					}, false);
					var region = doc.getElementById('region');
					region.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
						
							address ="" + items[0].text + ""
							region.innerText =address;
							region.value=address;
							getAddress();
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
						
					}, false);
					var shop = doc.getElementById('shop');
					shop.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							address +="" + items[0].text + ""
							shop.innerText =address;
							shop.value=address;
							getAddress();
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
						
					}, false);
					
				});
			})(mui, document);

			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			
			function getAddress()
			{

				$('#address').val($('#province').val()+ $('#city').val()+$('#region').val()+$('#shop').val());
				
			}
			
		</script>
	</body>

</html>